﻿@import "../_theme.scss";


#user-info{
    padding:4rem;
}

#acnt-info{
    margin-bottom:2rem;
}

#ai-headimg{
    width:12rem;
    height:12rem;
    border:5px solid white;
    box-shadow:0 0 5px 0;
    float:left;
}

#ai-fields {
    margin: 0 0 0 14rem;

    & > div {
        & > div {
            line-height: 4rem;
        }
    }

    & .title {
        font-size: 100%;
        font-weight: bold;
    }
}
#ai-certification{
    font-size:110%;
    color:$ClrOk;
}
#ai-no-certification {
    padding: 2px 5px;
    background-color: $ClrImportant;
    color: white;
    border-radius: 5px;
}

#my-certify-undo {
    height: 8rem;
    width: 23rem;
    background-color: $ClrFocus;
    color: white;
    text-align: center;
    line-height: 8rem !important;
    font-size: 2.5rem;
    border-radius: 5px;

    & > i {
        font-size: 3.5rem;
        font-weight: bold;
    }
}
#my-certify-pending {
    height: 8rem;
    width: 23rem;
    background-color: $ClrFocus;
    color: white;
    text-align: center;
    line-height: 8rem !important;
    font-size: 2.5rem;
    border-radius:5px;
    & > i {
        font-size: 3.5rem;
        font-weight: bold;
    }
}
#my-certify-ok {
    height: 8rem;
    width: 23rem;
    background-color: $ClrOk;
    color: white;
    text-align: center;
    line-height: 8rem !important;
    font-size: 2.5rem;
    border-radius: 5px;

    & > i {
        font-size: 3.5rem;
        font-weight: bold;
    }
}

#my-mphones{
    line-height:2.6rem;
}

#my-sec{
    line-height:2.6rem;
}

#my-wechat{
    line-height:2.6rem;
}

.mym-default {
    text-align: left;
    padding:10px;
    & > .row {
        box-shadow: 0 0 5px 0 black;
        background-color: white;
    }
}

.mym-exphone {
    text-align: left;
    padding: 10px;
    &.unbind{
        &>.row{
            color:lighten($ClrThemeTxt,25);
            box-shadow:none;
            border:1px dashed;
        }
    }
    & > .row {
        box-shadow: 0 0 5px 0 black;
        background-color: white;
    }
}

.mym-icon{
    text-align:center;
    &>i{
        font-size:8rem;
    }
}
.mym-tip {
    padding: 10px;
}
.mym-flag {
    background-color: $ClrFocus;
    color: $ClrFocusTxt;
    padding: 5px;
    font-size: 90%;
}

.pwd-action,.myw-status{
    text-align:center;
    padding:10px;
}

#mphone_binder {
    padding: 0 1rem 1rem 0;
}
#new-mphone-tip {
    padding:0 5px;
    &.ok {
        color: $ClrOk;
    }
}

#my-companies {
    & > .info-tip {
        margin: 1rem 0;
    }
}

.mycpn-wraper {
    padding: 0 10px;

    & > .mycpn-card {
        margin: 5px 0;
        display: table;
        width: 100%;

        & > .mycpn-card-left {
            display: table-cell;
            vertical-align: middle;
            width: 35%;
            height: 14rem;
            background-color: lighten($ClrThemeBk,10);
            text-align: center;
            background-position:center;
            background-repeat:no-repeat;
            background-size:50% auto;
            & > img {
                width: 50%;
                //margin-left: 25%;
            }
        }

        & > .mycpn-card-right {
            //float: left;
            //width: 55%;
            height: 14rem;
            padding-right: 5px;

            & i {
                margin-left: -1rem;
                background: white;
                border-radius: 50%;
                padding: 5px;
                border: 1px solid $ClrThemeBk;
                box-shadow: 0 2px 5px 0;
            }
        }

        &.application {
            & > .mycpn-card-left {
                background-color: transparent;

                & > i {
                    font-size: 10rem;
                }
            }
        }

        &.creation {
            & > .mycpn-card-left {
                background-color: transparent;

                & > i {
                    font-size: 10rem;
                }
            }
        }
    }
}
.mycpn-type-application{
    color:$ClrFocus;
}
.mycpn-type-creation {
    color: $ClrTheme;
}

#password_editor {
    padding: 1rem 4rem;
}
#pwd_editor_bottom {
    padding: 2rem 0 0 0;
    text-align: center;

    & > button {
        width: 12rem;
    }
}